<template>
    <div v-if="arr.length!=0" class="cywh">
        <Topbar/>
        <img :src="this.arr[2].slider[0].backgroundImage1" alt="">
        <div class="box">
            <Sonpopular v-for="(v,i) in arrc"  :key="i" :img="v.image" :p="v.p" :h3="v.h3" :sp1="v.sp1" :sp2="v.sp2"/>
        </div>
            
    </div>
</template>

<script>
import {getlink} from "@/api/getapi.js"
import Sonpopular from "@/components/ddgHD/sonpopular.vue"
import Topbar from "@/components/ddgHD/topbar.vue"
export default {
    components:{
        Sonpopular,
        Topbar
    },
    
    data(){
        return {
            arr:[],
            arrc:[]
        }
    },
    mounted() {
        getlink("/data/ddg").then((ok)=>{
            this.arr=ok.data.data
            this.arrc=ok.data.data[2].sliderImg
        })
    }
}
</script>

<style scoped>
    .cywh{
        font-size: 0.12rem;
    }
    img{
        width: 100%;
        vertical-align: middle;
    }
    .box{
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    .nav{
        background-color: white;
        width: 90%;
        height: 0.3rem;
        border: 2px solid red;
        margin: 0 auto;
        line-height: 0.3rem;
        padding: 0.1rem;
       
    }
    .nav>a>span{
        padding: 0.1rem 0.2rem;
    }
    .nav>a{
        color: #212121;
    }
    .nav a.router-link-exact-active {
        color: white;
        display: inline-block;
        width: 33%;
        background-color: red;
    }
</style>